<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">机器人对对联</h2>
    <br><br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <button mat-raised-button (click)="genCouplet()" [disabled]="sending">
                生成随机对联
            </button>
            &nbsp;&nbsp;&nbsp;
            {{couplet}}
            <br><br>
            <button mat-raised-button (click)="genShanglian()" [disabled]="sending">
                生成随机上联
            </button>
            <br><br>
            <mat-form-field style="width: 100%">
                <input matInput [(ngModel)]="shanglian" type="text" placeholder="上联">
            </mat-form-field>
        </mat-card>
    </div>
    <br>
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="predict()" [disabled]="sending || !shanglian">
            对下联
        </button>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div *ngIf="xialian && !error && ! sending">
                <mat-form-field style="width: 100%">
                    <input matInput [(ngModel)]="xialian" type="text" placeholder="下联" readonly>
                </mat-form-field>
            </div>
            <p *ngIf="!xialian && !sending && !error">
                下联
            </p>

            <div *ngIf="error">
                出错啦...
            </div>

            <div *ngIf="sending">
                正在苦思冥想...
            </div>
            <mat-spinner *ngIf="sending"></mat-spinner>

        </mat-card>
    </div>
</mat-card>

